<template>
  <div style="height: 100%;width: 500%;">
  </div>
</template>
<script>
  import Format from '@/utils/format'
  import EchartsMixins from "../../monitor/monitor-point/monitor-echarts/echarts.mixins";

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        seriesList: {},
        dataList: [],
        xData: [],
        xAxis: {},
        title: '',
        charts: '',
        valueList: [],
        // 监测点名称
        monitorName: '',
        color:''
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        var that = this
        return {
          holeDepth: 0,
          title: {
            text: this.title,
            x: 'left',
            align: 'right'
          },
          grid: {
            left: '70px',
            right: '80px',
            bottom: '110px'
          },
          color:this.color,
          toolbox: {
            left: '300',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {},
              dataView: {
                show: true
              },
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: function (params, ticket, callback) {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (that.title == '所有客户销售订单数量统计') {
                  contentArr.push(data.marker + data.axisValue + '数量：' + data.data.value + '个')
                } else {
                  contentArr.push(data.marker + data.axisValue + '数量：' + data.data + '个')

                }
              }
              return contentArr.join('<br/>')
            }
          },
          xAxis: this.xAxis,
          yAxis: {
            name: ' 数量(个)',
            type: 'value'
          },
          series: this.seriesList

        }
      }
    },
    methods: {
      setWarningLine() {
      },
      updateEchart(data, title, type,colorIndex) {
        let colorList =['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393']

        this.charts.clear()
        this.xData = []
        this.color=colorList[colorIndex]
        this.xAxis = {}
        this.seriesList = {}
        this.dataList = []
        this.title = title
        if (type == 2) {
          this.xAxis = {
            axisLabel:
              {
                show: true,
                interval: 0,//使x轴上的文字显示完全,
                //设置一行显示几个字,自己设置
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 8;
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                }
              },
            data: this.xData,
          }
          data.map(x => {
            this.xData.push(x.name)
            this.dataList.push({
              value: x.num,
              id: x.id,
              name:x.name
            })
          })
        } else {
          data.map(x => {
            this.xData.push(x.name)
            this.dataList.push(x.num)
          })
          this.xAxis = {
            data: this.xData,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        }
        this.seriesList = {
          type: "bar", //形状为柱状图
          data: this.dataList,
          barWidth:'20px',
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示数值
                position: 'top', //数值在上方显示
                color: '#00A3E0',

                textStyle: {  //数值样式
                  color: '#1990FE',   //字体颜色
                  fontSize: 20  //字体大小
                }
              }


            }
          }
        }
        this.initEcharts()
        var that = this
        if (type == 2) {
          // 其中，getZr()方法可以监听到整个画布的点击事件，xIndex是被点击的柱形的index
          // 若要实现获取id的效果，则需要拿到series的数组，再通过index拿到对应的数据对象
          this.charts.getZr().on('click', params => {
            let pointInPixel = [params.offsetX, params.offsetY]
            if (this.charts.containPixel('grid', pointInPixel)) {
              let xIndex = this.charts.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0]
              this.$emit('picId', that.seriesList.data[xIndex])

            }
          })

        }
        this.charts.setOption(this.options)
        this.echartResize()
      },

    },
  }
</script>
